<template>
  <div class="f-flex containerq">
    <!-- 树结构 -->
    <tree @getMessage="getMessage" />
    <div class="right">
      <div class="f-flex1 content">
        <img src="./images/floor.jpeg" alt="">
        <div v-show="oppen" ref="monitor_video" class="monitor_video">
          <p>设备正常</p>
          <span>CRKA-01</span>
          <div>当前开启</div>
          <el-button type="primary" size="mini">开启</el-button>
          <el-button size="mini" @click="off">关闭</el-button>
        </div>
        <div class="map">
          <div @click="Prison" />
          <div @click="abcd" />
          <div @click="Prison" />
          <div @click="Prison" />
          <div @click="abc" />
          <div @click="Prison" />
          <div @click="Prison" />
          <div @click="Prison" />
          <div @click="Prison" />
          <div @click="Prison" />
          <div @click="Prison" />
        </div>
      </div>
      <el-table :data="tableData" height="266">
        <el-table-column prop="date" label="位置" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="address" label="报警类型" />
        <el-table-column prop="address" label="卡号" />
        <el-table-column prop="address" label="报警时间" />
        <el-table-column prop="address" label="处理时间" />
        <el-table-column prop="address" label="处理描述" />
        <el-table-column prop="address" label="处理人信息" />
        <el-table-column prop="address" label="联动信息" />
        <el-table-column label="操作" align="center" fixed="right" width="220px">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" icon="el-icon-check" plain @click="handlehandle(scope.$index, scope.row)">处理</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" plain @click="handleVideo(scope.$index, scope.row)">关联视频</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Handle ref="handle" />

    <!-- 关联视频 -->
    <el-dialog title="视频" :visible.sync="videoDialog" width="40%" @close="close">
      视频内容
    </el-dialog>
  </div>
</template>

<script>
import Tree from './Tree'
import Handle from './handle.vue'
export default {
  name: 'Graphic',
  components: {
    Tree,
    Handle
  },
  data() {
    return {
      activeName: 'first',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      },
      nodeData: { // 选中数据
        title: '',
        items: []
      },
      oppen: false,
      videoDialog: false
    }
  },
  mounted() {
    console.log('route', this.$route)
  },
  methods: {
    // 处理
    handlehandle() {
      this.$refs.handle.togglehandle(true)
    },
    // 新增
    append(node, data) {
      this.selectNode = node
      this.selectData = data
      this.$refs.add.toggleAdd(true, 'default')
    },
    // 获取右侧展示数据
    getMessage(data) {
      console.log(1111, data)
      this.nodeData = data
    },
    Prison(e) {
      const that = this; const x = e.x - 500; const y = e.y - 200
      that.oppen = true
      console.log(e.x, e.y)
      that.$refs.monitor_video.style.left = x + 'px'
      that.$refs.monitor_video.style.top = y + 'px'
    },
    abc(e) {
      const that = this; const x = e.x - 720; const y = e.y - 200
      that.oppen = true
      console.log(e.x, e.y)
      that.$refs.monitor_video.style.left = x + 'px'
      that.$refs.monitor_video.style.top = y + 'px'
    },
    abcd(e) {
      const that = this; const x = e.x - 500; const y = e.y - 200
      that.oppen = true
      console.log(e.x, e.y)
      that.$refs.monitor_video.style.left = x + 'px'
      that.$refs.monitor_video.style.top = y + 'px'
    },
    off() {
      this.oppen = false
    },
    // 点击关联视频
    handleVideo() {
      this.videoDialog = true
    },
    // 关闭关联视频弹框
    close() {
      this.videoDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.containerq {
  height: 920px;
  .right {
    width: 83%;
    height: 100%;
  }
  .content {
    height: 74%;
    width: 100%;
    border: 1px solid #ebeef5;
    box-shadow: -1px -1px 2px 0px #ebeef5;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .monitor_video {
      width: 174px;
      height: 125px;
      background-color: #fff;
      background-size: auto 100%;
      position: absolute;
      z-index: 999;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      div {
        margin: 8px 0 8px 0;
        height: 30px;
        width: 100%;
        background-color: rgb(223, 234, 238);
        font-size: 15px;
        line-height: 30px;
        text-align: center;
        color: skyblue;
      }
      span {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 800;
      }
      p {
        display: inline-block;
        width: 56px;
        height: 30px;
        background-color: rgb(0, 178, 248);
        color: #fff;
        line-height: 30px;
        text-align: center;
        margin-left: -14px;
        font-size: 12px;
      }
    }
    .map div {
      width: 42px;
      height: 42px;
      background: url('./images/blue.png') no-repeat;
      background-size: 100% auto;
      position: absolute;
      cursor: pointer;
    }
    .map div:nth-child(1) {
      top: 127px;
      left: 125px;
    }
    .map div:nth-child(2) {
      top: 117px;
      left: 263px;
    }
    .map div:nth-child(3) {
      top: 233px;
      left: 887px;
    }
    .map div:nth-child(4) {
      top: 539px;
      left: 263px;
    }
    .map div:nth-child(5) {
      top: 275px;
      right: 157px;
    }
    .map div:nth-child(6) {
      top: 110px;
      left: 634px;
    }
    .map div:nth-child(7) {
      top: 329px;
      right: 466px;
    }
    .map div:nth-child(8) {
      top: 123px;
      right: 419px;
    }
    .map div:nth-child(9) {
      background: url('./images/yellow.png') no-repeat;
      top: 401px;
      left: 281px;
      background-size: 100% auto;
    }
    .map div:nth-child(10) {
      background: url('./images/yellow.png') no-repeat;
      top: 262px;
      left: 707px;
      background-size: 100% auto;
    }
    .map div:nth-child(11) {
      background: url('./images/yellow.png') no-repeat;
      top: 540px;
      right: 676px;
      background-size: 100% auto;
    }
  }
}
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0;
}
.menu[data-v-230c8acb] {
  width: 300px;
  height: 61%;
  border: 1px solid #ebeef5;
  -webkit-box-shadow: -1px -1px 2px 2px #ebeef5;
  box-shadow: -1px -1px 2px 2px #ebeef5;
}
</style>

